<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <ul>
          <li v-for="(item, index) in top_content" :key="index"  >
			  <div style="{{item.style}}">
            <img :src="item.img_url" alt="" />
            <div>
              <h4>{{ item.title }}</h4>
              <p>{{ item.number }}</p>
            </div>
			</div>
          </li>
        </ul>
      </div>
      <div class="bottem_content"> 
        <h3 >信息走势</h3>
        <div class="picker">
          <div class="picker_content">
            <Picker @time_change="time_change" />
          </div>
        </div>
        <div class="echarts" v-if="init_echart">
          <Echarts  :list="list"/>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import Nav from '@/components/public/nav.vue'
import Picker from '@/components/home/picker.vue'
import Echarts from '@/components/home/echarts.vue'
import { useRouter } from 'vue-router'
import { get_index_list } from "@/request/api/index"
import { onMounted, ref } from 'vue'
const router = useRouter()
// 首页顶部的信息
const top_content: any = ref()
let init_echart = ref(true)
// 中间的待处理事务
const content = [
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  },
  {
    title: '审核信息',
    number: '10'
  }
]
let params_init: any = {
  start_time: null,
  end_time: null
}
let list: any = ref({})
// 时间改变
async function time_change(val: any) {
  init_echart.value = false
  console.log(val, 'val')
  params_init.start_time = val?.[0]
  params_init.end_time = val?.[1]
  await get_list()
  init_echart.value = true
}

const get_list = async () => {
  let { data } = await get_index_list(params_init)
  list.value = data
  init_data()
}
// 数据处理
const init_data = () => {
  // 返回：一个数组
  let key = Object.keys(list.value.line_chart)
  let arrY: any = []
  let arrX: any = []
  key.forEach((item: any) => {
    console.log();
    let a = new Date(item * 1000);
    arrX.push(a.toLocaleDateString().replace(/\//g, "-"))
    arrY.push(list.value.line_chart[item])
    list.value.arrX = arrX
    list.value.arrY = arrY
  })
}
onMounted(async () => {
  await get_list()
  top_content.value = [
    {
      img_url:
        'https://files.axshare.com/gsc/IM3O2U/21/0e/b7/210eb787e70d46fb818b9afcfe2819b6/images/%E9%A6%96%E9%A1%B5_1/u10.svg?pageId=02293557-f3bf-4bb9-9ffb-71aba0890256',
      title: '今日信息总数',
      number: list.value.message_total,
	  style:"background:red"
    },
    {
      img_url:
        'https://files.axshare.com/gsc/IM3O2U/21/0e/b7/210eb787e70d46fb818b9afcfe2819b6/images/%E9%A6%96%E9%A1%B5_1/u11.svg?pageId=02293557-f3bf-4bb9-9ffb-71aba0890256',
      title: '今日打赏总额',
      number: list.value.today_give_a_reward_total
    },
    {
      img_url:
        'https://files.axshare.com/gsc/IM3O2U/21/0e/b7/210eb787e70d46fb818b9afcfe2819b6/images/%E9%A6%96%E9%A1%B5_1/u32.svg?pageId=02293557-f3bf-4bb9-9ffb-71aba0890256',
      title: '昨日打赏总额',
      number: list.value.yesterday_give_a_reward_total
    },
    {
      img_url:
        'https://files.axshare.com/gsc/IM3O2U/21/0e/b7/210eb787e70d46fb818b9afcfe2819b6/images/%E9%A6%96%E9%A1%B5_1/u5.svg?pageId=02293557-f3bf-4bb9-9ffb-71aba0890256',
      title: '近7天打赏总额',
      number: list.value.last_7_day_give_a_reward_total
    }
  ]
})
</script>
  
<style lang="scss" scoped>
.main {
  display: flex;


  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    background: rgba(#fff, 1);

    .top_content {
      ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
		li:nth-child(4n+1){
			background-color: #F56C6C;
			
		}
		li:nth-child(4n+2){
			background-color: #67C23A;
		}
		li:nth-child(4n+3){
			background-color: #E6A23C;
		}
		li:nth-child(4n+4){
			background-color: #409EFF;
		}
        li {
          display: flex;
 border-radius: 10px;
          align-items: center;
          width: 23%;
          height: 100px;
          padding: 20px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          box-sizing: border-box;

          img {
            width: 46px;
            margin-right: 14px;
          }

          h4 {
            @include font(#fff, 16, 28);
          }

          p {
            @include font(#fff, 20, 28);
            margin-top: 5px;
          }
        }
      }
    }

    .bottem_content {
      margin-top: 20px;
	      border: 1px solid #ebebeb;
	      border-radius: 3px;
		
      h3 {
        height: 45px;
        // background-color: rgba(243, 243, 243, 1);
        padding: 0px 30px 0px 20px;
        box-sizing: border-box;
        @include font(#333, 13, 45);
		background-color: #e9f2fa;
        font-weight: 700;
        border-bottom: 1px solid rgba(228, 228, 228, 1);
      }

      .picker {
        display: flex;
        justify-content: right;
        margin-top: 20px;
       
        .picker_content{
          width: 400px;
          margin-right: 50px;
        }
      }

      .echarts {
        margin-top: 20px;
      }
    }

    .content {
      margin-top: 10px;
      border: 1px solid rgba(228, 228, 228, 1);

      h3 {
        height: 45px;
        background-color: rgba(243, 243, 243, 1);
        padding: 0px 30px 0px 20px;
        box-sizing: border-box;
        @include font(#333, 13, 45);
        font-weight: 700;
        border-bottom: 1px solid rgba(228, 228, 228, 1);
      }

      ul {
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;

        li {
          width: 347px;
          height: 40px;
          padding: 0 15px;
          border-bottom: 1px solid rgba(242, 242, 242, 1);
          display: flex;
          justify-content: space-between;
          @include font(#333, 13, 40);
          margin-right: 60px;

          &:nth-child(3n) {
            // margin-right: 0
          }

          .number {
            @include font(rgb(102, 102, 102), 13, 40);

            strong {
              color: rgb(240, 72, 68);
            }
          }

          span {
            cursor: pointer;

            &:hover {
              color: rgb(26, 188, 156);

              strong {
                color: rgb(26, 188, 156);
              }
            }
          }
        }
      }
    }
  }
}
</style>